<template>
  <view class="content-main bg-color-white">
    <view class="tn-margin-bottom-xl bg-color-white">
      <view class="tn-flex tn-flex-row-between pa-12 tn-strip-bottom-min">
        <view class="justify-content-item">
          <view class="tn-text-bold tn-text-lg">
            <text style="color: red">*</text>
            请选择分类
          </view>
        </view>
      </view>
      <view class="flex flex-js-sb flex-js-center pa-12" style="">
        <TnButton
          width="210"
          :plain="feedIndex == index ? false : true"
          height="65"
          v-for="(item, index) in feedbookList"
          :key="index"
          @click="handleTag(index)"
          >{{ item.title }}
        </TnButton>
      </view>
      <view class="tn-flex tn-flex-row-between pa-12 tn-strip-bottom-min">
        <view class="justify-content-item">
          <view class="tn-text-bold tn-text-lg">
            <text style="color: red">*</text>
            详细内容
          </view>
        </view>
      </view>
      <view class="flex flex-js-sb flex-js-center pa-12" style="">
        <textarea
          style="width: 100%; height: 180rpx"
          v-model="formData.content"
          class="G-Pt-5"
          placeholder="请输入反馈内容，添加图片方便我们定位问题"
          name=""
          id=""
          cols="30"
          rows="10"
        ></textarea>
      </view>
      <view class="pl-12">
        <TnImageUpload
          v-model="imageList"
          :limit="4"
          :action="actionUrl"
          :show-error-tips="false"
          :custom-upload-callback="uploadCallbackHandle"
        />
        <view>最多可上传4张</view>
      </view>
      <view class="tn-flex tn-flex-row-between pa-12 tn-strip-bottom-min">
        <view class="justify-content-item">
          <view class="tn-text-bold tn-text-lg"> 联系方式 </view>
        </view>
      </view>
      <view class="pl-12 plr-12">
        <TnInput
          v-model="formData.phoneNum"
          placeholder="请输入手机号或微信号"
          size="sm"
          maxlength="20"
        />
      </view>
    </view>
    <view class="tn-flex flex-js-center tn-footerfixed">
      <TnButton
        width="80%"
        height="80"
        shape="round"
        text-color="#FFFFFF"
        font-size="32"
        shadow
        fontBold
        bgColor="#4b49e8"
        click-modifiers="stop"
        @click="handleSubmitFeedback"
        >提交反馈</TnButton
      >
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { userFeedBack, xxwFeedbackApi } from '@/services/api'
import type { ImageUploadCustomCallbackFunction } from '@tuniao/tnui-vue3-uniapp'
const imageList = ref<string[]>([])
const feedbookList = [
  {
    title: '内容反馈',
    value: 0,
  },
  {
    title: '功能建议',
    value: 1,
  },
  {
    title: '其他',
    value: 2,
  },
]
const formData = ref({
  kind: 0,
  content: '',
  phoneNum: '',
  picUrls: [],
})
const feedIndex = ref(0)
const actionUrl = ref('https://hr.xming-ai.com/xm/platform/file_upload')
const uploadCallbackHandle: ImageUploadCustomCallbackFunction = (
  data: UniApp.UploadFileSuccessCallbackResult
) => {
  const resData = JSON.parse(data.data)
  console.log(resData.data.file_url)
  return resData.data.file_url
}
const handleTag = (index: number) => {
  feedIndex.value = index
  formData.value.kind = feedbookList[index].value
}
const handleSubmitFeedback = async () => {
  let obj = {
    ...formData.value,
    picUrls: imageList.value,
  }
  if (obj.content == '') {
    uni.showToast({
      title: '请先填写完整数据',
      icon: 'none',
      duration: 2000, //持续时间为 2秒
    })
    return
  }
  if (obj.phoneNum.length > 20) {
    uni.showToast({
      title: '手机号码过长',
      icon: 'none',
      duration: 2000, //持续时间为 2秒
    })
    return
  }
  const { code, msg } = await xxwFeedbackApi(obj)
  if (code == 200) {
    uni.showToast({
      title: '提交成功',
      icon: 'success',
      duration: 2000, //持续时间为 2秒
    })
    setTimeout(function () {
      uni.navigateBack()
    }, 2000)
  } else {
    uni.showToast({
      title: msg,
      icon: 'error',
      duration: 2000, //持续时间为 2秒
    })
  }
}
</script>

<style lang="scss" scoped>
.content-main {
  width: 720rpx;
  margin: 0 auto;
  border-radius: 16rpx;
  overflow: hidden;
}

/* 胶囊*/
.tn-custom-nav-bar__back {
  width: 60%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 1000rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.5);
  color: #ffffff;
  font-size: 18px;

  .icon {
    display: block;
    flex: 1;
    margin: auto;
    text-align: center;
  }
}

/* 间隔线 start*/
.tn-strip-bottom-min {
  width: 100%;
  border-bottom: 1rpx solid #f8f9fb;
}

.tn-strip-top {
  width: 100%;
  // border-top: 20rpx solid rgba(241, 241, 241, 0.8);
}

/* 间隔线 end*/

/* 用户头像 start */
.user-image {
  width: 90rpx;
  height: 90rpx;
  position: relative;
}

.user-pic {
  background-size: cover;
  background-repeat: no-repeat;
  // background-attachment:fixed;
  background-position: top;
  border-radius: 50%;
  overflow: hidden;
  background-color: #ffffff;
}

/* 底部悬浮按钮 start*/
.tn-tabbar-height {
  min-height: 120rpx;
  height: calc(140rpx + env(safe-area-inset-bottom) / 2);
  height: calc(140rpx + constant(safe-area-inset-bottom));
}

.tn-footerfixed {
  position: fixed;
  width: 100%;
  bottom: 100rpx;
  z-index: 1024;
  box-shadow: 0 0.5px 3px transparent;
}
</style>
